<!-- 服装材质列表页面 -->
<template>
  <div class="material-list-container">
    <el-card class="filter-card">
      <div class="filter-header">
        <h2>服装材质</h2>
        <div class="right-actions">
          <el-button type="primary" @click="resetFilters">重置筛选</el-button>
        </div>
      </div>
      <el-form :model="filterForm" label-width="80px" inline>
        <el-form-item label="关键词">
          <el-input v-model="filterForm.keyword" placeholder="材质名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="价格范围">
          <el-input-number 
            v-model="filterForm.minPrice" 
            :min="0" 
            :precision="2" 
            :step="10" 
            size="small"
            placeholder="最低价">
          </el-input-number>
          <span class="price-separator">至</span>
          <el-input-number 
            v-model="filterForm.maxPrice" 
            :min="0" 
            :precision="2" 
            :step="10" 
            size="small"
            placeholder="最高价">
          </el-input-number>
        </el-form-item>
        <el-form-item label="适用季节">
          <el-select v-model="filterForm.season" placeholder="全部" clearable>
            <el-option v-for="item in seasonOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="material-card">
      <div class="material-grid">
        <div v-for="material in materialList" :key="material.id" class="material-item" @click="showDetail(material)">
          <div class="material-image">
            <el-image :src="material.imageUrl || defaultImage" :alt="material.name" fit="cover">
              <template #error>
                <div class="image-placeholder">
                  <el-icon><PictureOutlined /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
          <div class="material-info">
            <h3>{{ material.name }}</h3>
            <div class="material-price">￥{{ material.price }} / {{ material.unit }}</div>
            <div class="material-tags">
              <el-tag size="small" v-if="material.season">{{ material.season }}</el-tag>
              <el-tag size="small" type="success" v-if="material.composition">{{ material.composition }}</el-tag>
            </div>
          </div>
        </div>
      </div>
      
      <div class="empty-data" v-if="materialList.length === 0">
        <el-empty description="暂无材质数据"></el-empty>
      </div>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[8, 16, 24, 32]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 材质详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="材质详情"
      width="600px"
      destroy-on-close
    >
      <div class="material-detail" v-if="currentMaterial">
        <div class="detail-header">
          <div class="detail-image">
            <el-image :src="currentMaterial.imageUrl || defaultImage" fit="cover">
              <template #error>
                <div class="image-placeholder">
                  <el-icon><PictureOutlined /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
          <div class="detail-info">
            <h2>{{ currentMaterial.name }}</h2>
            <div class="info-item">
              <span class="label">价格：</span>
              <span class="price">￥{{ currentMaterial.price }} / {{ currentMaterial.unit }}</span>
            </div>
            <div class="info-item">
              <span class="label">材质成分：</span>
              <span>{{ currentMaterial.composition || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">适用季节：</span>
              <span>{{ currentMaterial.season || '未设置' }}</span>
            </div>
          </div>
        </div>
        
        <div class="detail-description">
          <h3>材质描述</h3>
          <p>{{ currentMaterial.description || '暂无描述' }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { PictureOutlined } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'MaterialList',
  components: {
    PictureOutlined
  },
  setup() {
    // 默认图片
    const defaultImage = ref('https://via.placeholder.com/200x300?text=暂无图片')
    
    // 材质列表
    const materialList = ref([])
    
    // 筛选表单
    const filterForm = reactive({
      keyword: '',
      minPrice: null,
      maxPrice: null,
      season: ''
    })
    
    // 分页设置
    const pagination = reactive({
      currentPage: 1,
      pageSize: 16,
      total: 0
    })
    
    // 季节选项
    const seasonOptions = [
      { value: 'spring', label: '春季' },
      { value: 'summer', label: '夏季' },
      { value: 'autumn', label: '秋季' },
      { value: 'winter', label: '冬季' },
      { value: 'all', label: '四季' }
    ]
    
    // 详情弹窗
    const detailDialogVisible = ref(false)
    const currentMaterial = ref(null)
    
    // 获取材质列表
    const fetchData = async () => {
      try {
        // 构建查询参数
        const params = {
          page: pagination.currentPage - 1,
          size: pagination.pageSize
        }
        
        if (filterForm.keyword) {
          params.keyword = filterForm.keyword
        }
        
        if (filterForm.minPrice !== null) {
          params.minPrice = filterForm.minPrice
        }
        
        if (filterForm.maxPrice !== null) {
          params.maxPrice = filterForm.maxPrice
        }
        
        if (filterForm.season) {
          params.season = filterForm.season
        }
        
        const response = await axios.get('/api/clothing/materials', { params })
        
        if (response.data.code === 200) {
          // 模拟数据，实际项目中应该使用后端返回的数据
          const mockData = simulateData(params)
          materialList.value = mockData.content
          pagination.total = mockData.totalElements
        } else {
          ElMessage.error(response.data.message || '获取材质列表失败')
        }
      } catch (error) {
        console.error('获取材质列表失败:', error)
        ElMessage.error('获取材质列表失败，请稍后重试')
        
        // 模拟数据，实际项目中移除
        const mockData = simulateData({})
        materialList.value = mockData.content
        pagination.total = mockData.totalElements
      }
    }
    
    // 重置筛选条件
    const resetFilters = () => {
      filterForm.keyword = ''
      filterForm.minPrice = null
      filterForm.maxPrice = null
      filterForm.season = ''
      pagination.currentPage = 1
      fetchData()
    }
    
    // 显示详情
    const showDetail = (material) => {
      currentMaterial.value = material
      detailDialogVisible.value = true
    }
    
    // 处理每页数量变化
    const handleSizeChange = (size) => {
      pagination.pageSize = size
      fetchData()
    }
    
    // 处理页码变化
    const handleCurrentChange = (page) => {
      pagination.currentPage = page
      fetchData()
    }
    
    // 模拟数据，实际项目中应该使用后端返回的数据
    const simulateData = (params) => {
      const allMaterials = [
        {
          id: 1,
          name: '纯棉面料',
          description: '100%纯棉面料，柔软透气，贴身舒适，适合制作各类日常服装。',
          imageUrl: 'https://via.placeholder.com/400x600?text=纯棉面料',
          price: 35.00,
          unit: '米',
          composition: '纯棉',
          season: '四季'
        },
        {
          id: 2,
          name: '丝绸面料',
          description: '高档丝绸面料，柔滑亮泽，触感舒适，适合制作高档礼服和特殊场合服装。',
          imageUrl: 'https://via.placeholder.com/400x600?text=丝绸面料',
          price: 120.00,
          unit: '米',
          composition: '蚕丝',
          season: '夏季'
        },
        {
          id: 3,
          name: '羊绒面料',
          description: '优质羊绒面料，保暖性好，质地柔软，适合制作高档冬季服装。',
          imageUrl: 'https://via.placeholder.com/400x600?text=羊绒面料',
          price: 180.00,
          unit: '米',
          composition: '羊绒',
          season: '冬季'
        },
        {
          id: 4,
          name: '亚麻面料',
          description: '天然亚麻面料，透气吸汗，挺括耐穿，适合制作夏季休闲服装。',
          imageUrl: 'https://via.placeholder.com/400x600?text=亚麻面料',
          price: 65.00,
          unit: '米',
          composition: '亚麻',
          season: '夏季'
        },
        {
          id: 5,
          name: '牛仔布',
          description: '经典牛仔布面料，耐磨耐穿，适合制作牛仔裤、夹克等休闲服装。',
          imageUrl: 'https://via.placeholder.com/400x600?text=牛仔布',
          price: 45.00,
          unit: '米',
          composition: '棉+涤纶',
          season: '四季'
        },
        {
          id: 6,
          name: '雪纺面料',
          description: '轻薄透明的雪纺面料，飘逸柔美，适合制作女性连衣裙、上衣等夏季服装。',
          imageUrl: 'https://via.placeholder.com/400x600?text=雪纺面料',
          price: 50.00,
          unit: '米',
          composition: '聚酯纤维',
          season: '夏季'
        },
        {
          id: 7,
          name: '羊毛呢面料',
          description: '优质羊毛呢面料，保暖挺括，适合制作冬季大衣、西装等正装。',
          imageUrl: 'https://via.placeholder.com/400x600?text=羊毛呢面料',
          price: 150.00,
          unit: '米',
          composition: '羊毛',
          season: '秋季'
        },
        {
          id: 8,
          name: '针织面料',
          description: '弹性好的针织面料，贴身舒适，适合制作T恤、运动服等休闲服装。',
          imageUrl: 'https://via.placeholder.com/400x600?text=针织面料',
          price: 40.00,
          unit: '米',
          composition: '棉+氨纶',
          season: '四季'
        }
      ]
      
      // 根据筛选条件过滤
      let filteredMaterials = [...allMaterials]
      
      if (params.keyword) {
        filteredMaterials = filteredMaterials.filter(item => 
          item.name.includes(params.keyword) || 
          (item.composition && item.composition.includes(params.keyword))
        )
      }
      
      if (params.minPrice !== undefined && params.minPrice !== null) {
        filteredMaterials = filteredMaterials.filter(item => item.price >= params.minPrice)
      }
      
      if (params.maxPrice !== undefined && params.maxPrice !== null) {
        filteredMaterials = filteredMaterials.filter(item => item.price <= params.maxPrice)
      }
      
      if (params.season) {
        filteredMaterials = filteredMaterials.filter(item => 
          item.season === params.season || item.season === '四季'
        )
      }
      
      // 计算分页
      const start = (pagination.currentPage - 1) * pagination.pageSize
      const end = start + pagination.pageSize
      const paginatedMaterials = filteredMaterials.slice(start, end)
      
      return {
        content: paginatedMaterials,
        totalElements: filteredMaterials.length
      }
    }
    
    // 页面加载时获取数据
    onMounted(() => {
      fetchData()
    })
    
    return {
      defaultImage,
      materialList,
      filterForm,
      pagination,
      seasonOptions,
      detailDialogVisible,
      currentMaterial,
      fetchData,
      resetFilters,
      showDetail,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.material-list-container {
  width: 100%;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-header h2 {
  margin: 0;
}

.price-separator {
  margin: 0 5px;
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.material-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  height: 100%;
}

.material-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.material-image {
  height: 200px;
  overflow: hidden;
}

.material-image img, .material-image .el-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 30px;
}

.material-info {
  padding: 15px;
}

.material-info h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-price {
  color: #f56c6c;
  font-weight: bold;
  margin-bottom: 10px;
}

.material-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.empty-data {
  padding: 40px 0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 详情弹窗样式 */
.material-detail {
  padding: 0 20px;
}

.detail-header {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.detail-image {
  width: 200px;
  height: 250px;
}

.detail-image .el-image {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.detail-info {
  flex: 1;
}

.detail-info h2 {
  margin: 0 0 20px 0;
  color: #303133;
}

.info-item {
  margin-bottom: 10px;
  line-height: 1.6;
}

.info-item .label {
  color: #909399;
  margin-right: 5px;
}

.info-item .price {
  color: #f56c6c;
  font-weight: bold;
}

.detail-description h3 {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  color: #303133;
}

.detail-description p {
  line-height: 1.8;
  color: #606266;
}
</style> 